<template>
  <div class="dashboard-container">
    <div class="app-container">
      <!-- 控制子组件插槽的方式-通过父传子 -->
      <!-- <page-tool :show-before="false"></page-tool> -->
      <page-tool>
        <el-button slot="after" type="primary" size="small" @click="onShowDialog({pid:'0',type:1})">新增权限</el-button>
      </page-tool>
      <el-table :data="list" border row-key="id">
        <el-table-column label="名称" align="center" prop="name"></el-table-column>
        <el-table-column label="标识" align="center" prop="code"></el-table-column>
        <el-table-column label="描述" align="center" prop="description"></el-table-column>
        <el-table-column label="操作" align="center" prop="">
          <el-button type="text">编辑</el-button>
          <el-button type="text">删除</el-button>
          <el-button type="text" @click="onShowDialog({pid:row.id,type:row.type})">添加</el-button>

        </el-table-column>

      </el-table>
    </div>
    <add-perm title="新增权限" :node="node" :visible="showAddPermDialog" @close="showAddPermDialog = false"></add-perm>

  </div>
</template>

<script>
import { translateListToTree } from '@/utils'
import { getPermissionList } from '@/api/permisson.js'
import AddPerm from './components/add-perm.vue'

export default {
  name: 'Permission',
  components: { AddPerm },
  props: {},
  data() {
    return {
      list: [],
      showAddPermDialog: false,
      node: {}// 当前节点
    }
  },
  created() {
    this.getPermissionListFn()
  },
  mounted() {},
  methods: {
    async getPermissionListFn() {
      // const list = await this.getPermissionList()
      // this.list = translateListToTree(list, '0')
      this.list = translateListToTree(await getPermissionList(), '0')
    },
    onShowDialog(node) {
      this.node = node
      this.showAddPermDialog = true
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
